<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">
<!--

.purchase_div {
	position:absolute;
	top:0px;
	width:1000px;
	height:800px;
	left:50%;
	margin-left:-500px;
	background-color:#f8fdff;
}
.purchase_left {
	position:absolute;
	width:210px;
	height:800px;
	background:url(../images/left.png) no-repeat;
}
.purchase_tab {
	position:absolute;
	background:url(../images/left_focus.png) no-repeat;
	top:2px;
	left:3px;
	width:208px;
	height:82px;
	color:#333;
	cursor:pointer;
}
.return_tab {
	position:absolute;
	background:url(../images/left_nofocus.png) no-repeat;
	left:3px;
	top:90px;
	width:208px;
	height:82px;
	color:#333;
	cursor:pointer;
}

.tab_nofocus {
	width:200px;
	font-size:18px;
	height:80px;
	line-height:80px;
	padding-left:30px;
}
.purchase_form_div {
	position:absolute;
	width:792px;
	height:600px;
	left: 208px;
	top: 0px;
}
.purchase_form {
	height:100%;
}
#productNameDivTitle {
	position:absolute;
	width:99px;
	height:29px;
	left: 28px;
	top: 37px;
	text-align:right;
	font-size:16px;
}
#productNameDiv {
	position:absolute;
	background: url(../images/ipt.png) no-repeat;
	width:300px;
	height:35px;
	line-height:35px;
	left: 138px;
	top: 29px;
}
.product_name_input {
	line-height:33px;
	height:33px;
	width:295px;
	background: transparent;
	border:none;
	padding-left:5px;
	font-size:18px;
}
#productNameErrorDiv {
	position:absolute;
	width:200px;
	height:35px;
	line-height:35px;
	left: 449px;
	top: 29px;
	color:#F00;
}
#productTypeDivTitle {
	position:absolute;
	width:99px;
	height:29px;
	left: 28px;
	top: 98px;
	text-align:right;
	font-size:16px;
}
#productTypeDiv {
	position:absolute;
	background: url(../images/long_select.png) no-repeat;
	width:300px;
	height:35px;
	line-height:35px;
	left: 138px;
	top: 90px;
}
.product_type_input {
	line-height:33px;
	height:33px;
	width:295px;
	background: transparent;
	border:none;
	padding-left:5px;
	font-size:18px;
}
.product_type_ul {
	list-style:none;
	visibility:hidden;
	width:297px;
	margin:0;
	left: 0;
	overflow-y: scroll;
	background: #F3F9FC;
	border: 1px solid #57A8E4;
	padding: 1px;
}
#productTypeTip {
	position:absolute;
	width:200px;
	height:12px;
	left: 153px;
	top: 70px;
	font-size:12px;
	visibility:hidden;
}
#productNumberTitle {
	position:absolute;
	width:99px;
	height:29px;
	left: 28px;
	top: 158px;
	text-align:right;
	font-size:16px;
}
#productNumberDiv {
	position:absolute;
	background: url(../images/ipt.png) no-repeat;
	width:300px;
	height:35px;
	line-height:35px;
	left: 138px;
	top: 150px;
}
#productPriceTitleDiv {
	position:absolute;
	width:99px;
	height:29px;
	left: 28px;
	top: 213px;
	text-align:right;
	font-size:16px;
}
#productPriceDiv {
	position:absolute;
	background: url(../images/ipt.png) no-repeat;
	width:300px;
	height:35px;
	line-height:35px;
	left: 138px;
	top: 205px;
}
#productTypeErrorDiv {
	position:absolute;
	width:200px;
	height:35px;
	line-height:35px;
	left: 449px;
	top: 90px;
	color:#F00;
}
#productNumberErrorDiv {
	position:absolute;
	width:200px;
	height:35px;
	line-height:35px;
	left: 449px;
	top: 150px;
	color:#F00;
}
#productPriceErrorDiv {
	position:absolute;
	width:200px;
	height:35px;
	line-height:35px;
	left: 449px;
	top: 205px;
	color:#F00;
}
#submitDiv {
	position:absolute;
	width:183px;
	height:53px;
	left: 138px;
	top: 274px;
}
#submit {
	position:absolute;
	background: url(../images/submit_big.png) no-repeat;
	width:100%;
	height:52px;
	line-height:52px;
	text-align:center;
	font-size:20px;
	font-weight:bold;
	border:0px;
	color:#fff;
	cursor:pointer;
}

-->
</style>

</head>
   
<body>
<div class="purchase_div">
  <div class="purchase_left">
    <div id="purchase_tab" class="purchase_tab" onclick="tabfocus('purchase_tab')">
        <span class="tab_nofocus">供应商进货</span>
    </div>
    <div id="return_tab" class="return_tab" onclick="tabfocus('return_tab')">
        <span class="tab_nofocus">用户退换货</span>
    </div>
  </div>
  <div id="purchase_form_div" class="purchase_form_div">
    <form id="purchase_form" name="purchase_form" class="purchase_form" method="post" action="">
      <div id="productNameDivTitle">商品名称</div>
      <div id="productNameDiv"><input type="text" name="productName" class="product_name_input" maxlength="15"/></div>
      <div id="productNameErrorDiv"></div>
      
      <div id="productTypeDivTitle">商品类型</div>
      <div id="productTypeDiv">
        <!--<input type="text" name="productType" id="productType" class="product_type_input" maxlength="15" onclick="showUL()"/>
        <ul id="product_type_ul" class="product_type_ul">
          <li id="type_1" onmouseover="changeColor('type_1', '#57a8e4')" onmouseout="changeColor('type_1', '')" onclick="putText('productType', 'pixie')">pixie</li>
          <li id="type_2" onmouseover="changeColor('type_2', '#57a8e4')" onmouseout="changeColor('type_2', '')" onclick="putText('productType', 'yundongxie')">yundongxie</li>
          <li id="type_3" onmouseover="changeColor('type_3', '#57a8e4')" onmouseout="changeColor('type_3', '')" onclick="putText('productType', 'yfdsgxie')">yfdsgxie</li>
          <li id="type_4" onmouseover="changeColor('type_4', '#57a8e4')" onmouseout="changeColor('type_4', '')" onclick="putText('productType', 'aaa')">aaa</li>
          <li id="type_5" onmouseover="changeColor('type_5', '#57a8e4')" onmouseout="changeColor('type_5', '')" onclick="putText('productType', 'bbb')">bbb</li>
        </ul>-->
        
        <input type="text" name="productType" id="productType" class="product_type_input" maxlength="15" onclick="showUL()" onblur="hideTip('productTypeTip')"/>
        <ul id="product_type_ul" class="product_type_ul">
          
        </ul>
      </div>
      
      <div id="productTypeTip">试试直接输入吧</div>
      <div id="productTypeErrorDiv"></div>
      
      <div id="productNumberTitle">数量</div>
      <div id="productNumberDiv"><input type="text" name="productNumber" class="product_name_input" maxlength="15"/></div>
      <div id="productNumberErrorDiv"></div>
      
      <div id="productPriceTitleDiv">进货单价</div>
      <div id="productPriceDiv"><input type="text" name="productPrice" class="product_name_input" maxlength="15"/></div>
      <div id="productPriceErrorDiv"></div>
      
      <div id="submitDiv"><input id="submit" type="submit" value="确认提交"/></div>
    </form>
  </div>
</div>
</body>
<script language="javascript" type="text/javascript">

var typeValue = $('productType');
var typeLiArray = $('product_type_ul').getElementsByTagName("li");
 
function hideTip(obj)
{
    $(obj).style.visibility = 'hidden';	
}
function putText(obj, text)
{
	$(obj).value = text;	
}
function changeColor(obj, color)
{
	$(obj).style.background=color;
}
function $(obj)
{
	return document.getElementById(obj);
}

function tabfocus(obj)
{
	if (obj == 'purchase_tab')
	{
		$('return_tab').style.background = 'url(../images/left_nofocus.png)';
		$('return_tab').style.color = '#333';
	}
	else if (obj == 'return_tab') 
	{
		$('purchase_tab').style.background = 'url(../images/left_nofocus.png)';
		$('purchase_tab').style.color = '#333';
	}
	
	$(obj).style.background = 'url(../images/left_focus.png)';
	$(obj).style.color = '#fff';
	
	
}
function showUL()
{
	if (typeLiArray.length == 0)
	{
		$('productTypeTip').style.visibility = 'visible';
	}
	else
	{
		var isShow = $('product_type_ul').style.visibility;
		if(!isShow || isShow == 'hidden')
		{
			$('product_type_ul').style.visibility='visible';
		}
		else
		{
			$('product_type_ul').style.visibility='hidden';
		}
	}
}
function initEvent()
{
	for (var i = 0; i < typeLiArray.length; i++)
	{
		typeLiArray[i].onmouseover = onmouse;
		typeLiArray[i].onmouseout = onmouse;
		typeLiArray[i].onclick = setTypeValue;
		
	}
}

function setTypeValue()
{
	for (var i = 0; i < typeLiArray.length; i++)
	{
		if (typeLiArray[i] == this)
		typeValue.value = typeLiArray[i].innerHTML;
	}
	showUL();
}
function onmouse()
{
	for (var i = 0; i < typeLiArray.length; i++)
	{
		if (typeLiArray[i] == this)
		{
			if (typeLiArray[i].style.background != '')
			{
				typeLiArray[i].style.background = '';
			}
			else
			{
				typeLiArray[i].style.background = '#57a8e4';
			}
		}
	}
}

initEvent();
</script>
</html>